<template>
  <el-card class="box-card" style="margin-bottom: 10px">
    <CategorySelector :isTo="isTo"></CategorySelector>
  </el-card>
  <el-card class="box-card" v-if="isTo">
    <template #header>
      <div class="card-header">
        <el-button
          type="primary"
          :icon="Plus"
          @click="toAddSave"
          :disabled="!categoryStore.category3Id"
          >添加属性</el-button
        >
      </div>
    </template>
    <el-table
      v-loading="loading"
      :data="attrList"
      border
      style="margin-top: 10px"
    ></el-table>
    <el-table :data="attrList" border style="width: 100%">
      <el-table-column
        prop="date"
        label="序号"
        type="index"
        align="center"
        width="80"
      />
      <el-table-column prop="attrName" label="属性值名称" width="180" />
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            style="margin-right: 8px"
            >{{ attrValue.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{ row, $index }">
          <el-button
            size="small"
            type="warning"
            :icon="Edit"
            @click="SetAttrData(row)"
          />
          <el-popconfirm
            title="确定要删除此条属性吗?"
            @confirm="DelOneAttr(row.id)"
          >
            <template #reference>
              <el-button size="small" type="danger" :icon="Delete" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <div v-else>
    <el-form>
      <el-form-item label="属性名" style="width: 300px; margin-top: 10px">
        <el-input
          placeholder="请输入属性名"
          wdith="200px"
          v-model="attrInfo.attrName"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="Plus"
          :disabled="!attrInfo.attrName"
          @click="addValue"
          >添加属性值</el-button
        >
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="attrInfo.attrValueList">
      <el-table-column
        :data="attrInfo.attrValueList"
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="属性值名称">
        <template v-slot="{ row, $index }">
          <el-input
            size="small"
            ref="inputRef"
            v-model="row.valueName"
            v-if="row.isShowInput"
            @blur="SaveInputVal(row, $index)"
          ></el-input>
          <span @dblclick="row.isShowInput = true" v-else>{{
            row.valueName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button size="small" type="danger" :icon="Delete" />
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      :disabled="!attrInfo.attrName"
      @click="addAttrValue"
      >保存</el-button
    >
    <el-button type="default" @click="isShowAttrList = true">取消</el-button>
  </div>
</template>
<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue'
export default {
  name: 'Attr',
  components: { CategorySelector },
}
</script>
<script setup lang="ts">
import { ref, watch, reactive, nextTick } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { useCategoryListStore } from '@/stores/CategorySelector'
import {
  ReqAttrListData,
  ReqDelOneAttrList,
  ReqAddAttrListData,
} from '@/api/product/Attr'
import type {
  AttrListModel,
  AttrModel,
  AttrValueModel,
} from '@/api/product/model/AttrModel'
import { ElMessage } from 'element-plus'
const categoryStore = useCategoryListStore()
const attrList = ref<AttrListModel>([])
const isTo = ref<boolean>(true)
//页面中的loading效果
const loading = ref<boolean>(false)
//用于获取文本框的DOM对象
const inputRef = ref<HTMLInputElement>()

//添加属性
const toAddSave = () => {
  isTo.value = false
}

//添加属性文本失去焦点事件处理程序
const SaveInputVal = (row: AttrValueModel, IptIndex: number) => {
  if (!row.valueName) {
    attrInfo.attrValueList.splice(IptIndex, 1)
    return
  }
  row.isShowInput = false
}

const SetAttrData = async (row: AttrValueModel) => {
  isTo.value = false
  Object.assign(attrInfo, row)
}

//点击保存将数据发送给后台
const addAttrValue = async () => {
  attrInfo.categoryId = categoryStore.category3Id
  await ReqAddAttrListData(attrInfo)
  ElMessage.success('更新成功...')
  isTo.value = true
}

//该函数用于请求列表数据(更新列表)
const getAttrListData = async () => {
  loading.value = true
  attrList.value = await ReqAttrListData({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id,
  })
  loading.value = false
}

const attrInfo = reactive<AttrModel>({
  id: undefined,
  attrName: '', // 要存储的属性名
  attrValueList: [], // 存储属性的数组
  categoryLevel: 3, // 等级
  categoryId: -1, // id值
})

//删除单条列表数据的处理程序
const DelOneAttr = async (id: number) => {
  await ReqDelOneAttrList(id)
  ElMessage.success('删除成功')
  getAttrListData()
}
const isShowAttrList = ref(true)
const addValue = () => {
  attrInfo.attrValueList.push({
    valueName: '',
    attrId: attrInfo.id, // 编辑的时候使用
    isShowInput: true, // 是不是显示输入框  还是说显示一个span标签
  })
  nextTick(() => {
    inputRef.value?.focus()
  })
}

watch(
  () => categoryStore.category3Id,
  async (category3Id) => {
    if (!category3Id) return
    getAttrListData()
  },
  { immediate: true }
)
</script>
<style></style>
